<template>
    <div class="forum-post-box" v-for="(item, index) in discussionList" :key="item.id">
        <div class="post-header">
            <div class="user-picture pic">
                <img :src="item.creator.avatar_url" v-if="item.creator && item.creator.avatar_url" />
                <el-icon size="20" color="#fff" v-else><User /></el-icon>
            </div>
            <div class="user-info">
                <div class="fullname over-1">{{$t('notice-txt.detail.reply-tips-txt')}}{{ detailInfo && detailInfo.title }}</div>
                <div class="date over-1">
                    {{$t('notice-txt.detail.from-txt')}}
                    <router-link style="color: #000000" :to="`/console/user/${item.creator.id}?courseId=${detailInfo && detailInfo.course.id}`">{{ item.creator.name }}</router-link>
                    {{$t('notice-txt.detail.to-txt')}}{{ formatDate(item.created_at) }}
                </div>
            </div>
        </div>
        <div class="post-body rich-box" v-html="item.content"></div>

        <div class="post-actions">
            <span class="post-action" @click="showReply(item, item.id)">{{$t('notice-txt.detail.reply-txt')}}</span>
        </div>
        <div class="reply-wrap" v-if="item.isShowReply">
            <el-form-item label="">
                <el-input v-model="item.replyForm.content" type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" :placeholder="$t('notice-txt.detail.replyForm-place')" />
            </el-form-item>
            <el-form-item label="">
                <el-button color="#F06423" v-loading="item.submitLoading" @click="submitReply(item)">{{$t('notice-txt.add-form.add-form-btn-submit')}}</el-button>
                <el-button color="#435764" @click="hideReply(item)">{{$t('notice-txt.add-form.add-form-btn-cancel')}}</el-button>
            </el-form-item>
        </div>

        <div></div>
        <reply v-if="item.replies && item.replies.length" :discussionList="relReplies(item.replies)" :detailInfo="detailInfo" />
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, reactive } from 'vue'
import moment from 'moment'
import CourseService from '@/api/course'
import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
// 接收父组件传递的当前层级数据
const props = defineProps({
    discussionList: {
        type: Array,
        default: () => [],
    },
    detailInfo: {
        type: Object,
        default: () => {},
    },
})
// 回复Form
// const replyForm = reactive({
//     content: '',
//     parent_id: 0,
// })
// const isShowReply = ref(false)
const showReply = (item: any, parentId: number) => {
    console.log('item', item)
    item.replyForm.content = ''
    item.replyForm.parent_id = parentId
    item.isShowReply = true
}
const hideReply = (item: any) => {
    item.replyForm.content = ''
    item.isShowReply = false
}
const emit = defineEmits(['relRefresh'])
// 提交回复
const submitReply = (item: any) => {
    if (item.replyForm.content.trim().length == 0) {
        return
    }
    const params = {
        course_id: props.detailInfo.course_id,
        notice_id: props.detailInfo.id,
        content: item.replyForm.content,
        parent_id: item.replyForm.parent_id,
    }
    console.log(params)
    item.submitLoading = true
    CourseService.postCourseDiscussion(params)
        .then(res => {
            item.replyForm.content = ''
            item.replyForm.parent_id = null
            emit('relRefresh')
        })
        .finally(() => {
            item.submitLoading = false
        })
}

const relReplies = (list:any) => {
    list.map(item => {
        item.replyForm = {
            content: '',
            parent_id: 0,
        }
        item.isShowReply = false;
        item.submitLoading = false;
    })
    return list;
}

// 处理方法：中文日期 + 英文星期 + 时间
const formatDate = (dateString: any) => {
    // 保存当前语言设置
    const originalLocale = moment.locale()
    // 1. 先获取英文星期缩写（ddd）
    moment.locale('en') // 临时切换为英文
    const weekday = moment.unix(dateString).format('ddd')
    // 2. 切换回中文环境，获取年月日和时间
    moment.locale('zh-cn') // 切换为中文
    const dateTime = moment.unix(dateString).format('YYYY年 MM月 DD日')
    const time = moment.unix(dateString).format('HH:mm')
    // 3. 恢复原始语言设置
    moment.locale(originalLocale)
    // 组合结果
    return `${dateTime}(${weekday}) ${time}`
}
</script>

<style lang="less" scoped>
.reply-wrap {
    padding: 15px;
    background-color: #fafafa;
}
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

h3 {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.discuss-settings-menu {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;

    .el-dropdown-link {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

.nav-top {
    padding: 15px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .book-prev,
    .book-next {
        color: #4c4c4c;
        font-size: 15px;
        cursor: pointer;

        display: flex;
        align-items: center;

        &:hover {
            color: #f06423;

            .el-icon {
                color: #f06423;
            }
        }
    }
}

.forum-post-box {
    margin-top: 8px;
    border-radius: 3px;
    border: 1px solid #0000001a;
    margin-left: 20px;
    width: calc(100% - 20px);
    .post-header {
        padding: 8px 15px;
        background-color: #f9f9f9;

        display: flex;
        align-items: center;
        gap: 8px;

        .user-picture {
            border-radius: 50%;
            width: 45px;
            height: 45px;
            background-color: #e6e5e5;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-info {
            flex-grow: 1;

            .fullname,
            .date {
                font-size: 12px;
                color: #212529;
                line-height: 1.25;
            }

            .fullname {
                margin-bottom: 4px;
                font-weight: bold;
            }
        }
    }

    .post-body {
        padding: 15px;
    }

    .post-actions {
        border-top: 1px solid #0000001a;
        padding: 15px;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;

        .post-action {
            line-height: 1.6;
            color: #a5a5a5;
            font-size: 12px;
            cursor: pointer;

            &:hover {
                color: #f06423;
            }
        }
    }
}
</style>
